<template>
  <header>
      <h1 class="header-title">欢迎来到网盘后台管理系统</h1>
      <p class="header-subtitle">高效、安全的文件管理解决方案</p>
  </header>
  <main>
      <div class="card-container">
          <div class="card">
              <h2>文件管理</h2>
              <p>快速管理上传的文件</p>
              <button @click="$router.push('/user')">进入管理</button>
          </div>
          <div class="card">
              <h2>后台管理</h2>
              <p>查看和管理用户账户</p>
              <button @click="$router.push('/adminView')">进入管理</button>
          </div>
          <div class="card">
              <h2>业务统计</h2>
              <p>查看用户日志</p>
              <button @click="$router.push('/system/log')">查看详情</button>
          </div>
      </div>
  </main>
</template>

<script setup>
</script>

<style scoped>
.header-title {
  font-size: 2.5em;
  text-align: center;
  margin: 10px 0;
  color: #333;
}

.header-subtitle {
  font-size: 1.2em;
  text-align: center;
  margin: 0;
  color: #666;
}

.card-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px auto;
}

.card {
  background: white; /* 移除了灰色背景 */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  padding: 30px;
  text-align: center;
  width: 250px; /* 固定宽度以实现横向排列 */
}

.card h2 {
  font-size: 1.5em;
  margin: 10px 0;
  color: #4facfe;
}

.card p {
  font-size: 1em;
  color: #666;
}

.card button {
  background: #4facfe;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

.card button:hover {
  background: #00a2ff;
}
</style>